<template>
  <div class="warpBox1">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-row :gutter="20" :class="$style.infoMa">
          <el-col :span="8">
            <nuxt-link to="/member">
              <div :class="$style.gridContent">
                <i class="el-icon-user" :class="$style.icon1" />
                <div :class="$style.rightBox">
                  <p :class="$style.fontstyle1">{{ Registered }}</p>
                  <p>今日注册</p>
                </div>
              </div>
            </nuxt-link>
          </el-col>
          <el-col :span="8">
            <div :class="$style.gridContent">
              <i class="el-icon-user-solid" :class="$style.icon1" />
              <div :class="$style.rightBox">
                <p :class="$style.fontstyle1">{{ activeMember }}</p>
                <p>今日活跃</p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <nuxt-link to="messageManage">
              <div :class="$style.gridContent">
                <i class="el-icon-bell" :class="$style.icon2" />
                <div :class="$style.rightBox">
                  <p :class="$style.fontstyle1">{{ HomeNumber }}</p>
                  <p>今日留言</p>
                  <!-- router-link-to messageManage -->
                </div>
              </div>
            </nuxt-link>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div :class="$style.gridContent1">
          <chart ref="chart1" style="width:100%" :options="orgOptions" :auto-resize="true" />
        </div>
      </el-col>
      <el-col :span="12">
        <div :class="$style.gridContent1">
          <chart ref="chart2" style="width:100%" :options="orgOptions1" :auto-resize="true" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div :class="$style.margin20">
          <el-card class="box-card" :class="$style.hotpostion">
            <div :class="$style.timer">
              <el-select v-model="someDay" placeholder="今日">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <el-tabs v-model="activeName">
              <el-tab-pane label="今日热搜" name="first">
                <el-table :data="tableData1" style="width: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column prop="tittle" show-overflow-tooltip label="标题" />
                  <el-table-column prop="numberViews" label="点击率" width="180" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="今日热帖" name="second">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column prop="tittle" show-overflow-tooltip label="标题" />
                  <el-table-column prop="numberViews" label="点击率" width="180" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div :class="$style.margin20">
          <el-card class="box-card">
            <el-tabs v-model="activeName1">
              <el-tab-pane label="商机热度" name="first">
                <el-table :data="tableData2" style="width: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column prop="tittle" show-overflow-tooltip label="标题" />
                  <el-table-column prop="numberViews" label="点击率" width="180" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const date = new Date()
let nowMonth = date.getMonth() + 1
let strDate = date.getDate()
var seperator = '-';
if (nowMonth >= 1 && nowMonth <= 9) {
  nowMonth = '0' + nowMonth
}
if (strDate >= 0 && strDate <= 9) {
  strDate = '0' + strDate
}
// 引入提示框和标题组件
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import mmUrl from '~/utils/utilUrl';
const resultDate = new Date()
export default {
  data() {
    return {
      Registered: null,
      activeMember: null,
      HomeNumber: null,
      orgOptions: {},
      orgOptions1: {},
      activeName: 'first',
      activeName1: 'first',
      tableData: [],
      tableData1: [],
      tableData2: [],
      someDay: '',
      options: [
        {
          value:
            date.getFullYear() + seperator + nowMonth + seperator + strDate,
          label: '今日'
        },
        {
          value: this.getFirstDayOfWeek(),
          label: '本周'
        },
        {
          value: date.getFullYear() + seperator + nowMonth,
          label: '本月'
        },
        {
          value: String(date.getFullYear()),
          label: '本年'
        }
      ]
    }
  },
  watch: {
    someDay(newd) {
      this.activeName === 'first'
        ? this.initeGetTableData(1)
        : this.activeName === 'second'
          ? this.initeGetTableData(2)
          : '';
    },
    activeName(newd) {
      this.someDay = '';
      newd === 'first'
        ? this.initeGetTableData(1)
        : newd === 'second'
          ? this.initeGetTableData(2)
          : '';
    }
  },
  mounted() {
    this.getTodayRegistered()
    this.initeGetTableData(0)
    this.initeGetTableData(1)
    this.initeGetTableData(2)
    this.getActiveMember()
    this.getMembersSevenDaysActive()
    this.getSevenDayRegisteredMember()
    this.getHomeNumber()
  },
  methods: {
    getFirstDayOfWeek() {
      const Nowdate = new Date()
      const WeekFirstDay = new Date(
        Nowdate - (Nowdate.getDay() - 1) * 86400000
      )
      const d = new Date(WeekFirstDay)
      return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
    },
    // 加载首页顶部留言数
    getHomeNumber() {
      this.$get({
        url: '/manage/question/getHomeNumber',
        data: {
          day: this.days
        }
      }).then(res => {
        this.HomeNumber = res
      })
    },
    // 加载首页顶部留言数
    // 查询七天活跃人数
    getMembersSevenDaysActive() {
      this.$get({
        url: '/manage/browseRecords/getMembersSevenDaysActive',
        data: {}
      }).then(res => {
        const data = Object.keys(res)
        const val = []
        for (const k in res) {
          val.push(res[k])
        }
        this.orgOptions = {
          title: {
            text: '最近七天活跃人数'
          },
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: data,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              data: val
            }
          ]
        }
      })
    },
    // 查询七天活跃人数
    // 近七天新注册用户
    getSevenDayRegisteredMember() {
      this.$get({
        url: '/manage/member/getSevenDayRegisteredMember',
        data: {}
      }).then(res => {
        const data = Object.keys(res)
        const val = []
        for (const k in res) {
          val.push(res[k])
        }
        this.orgOptions1 = {
          title: {
            text: '最近七天注册人数'
          },
          xAxis: {
            type: 'category',
            data: data
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: val,
              type: 'line'
            }
          ]
        }
      })
    },
    // 近七天新注册用户
    // 加载首页顶部活跃人数
    getActiveMember() {
      this.$get({
        url: '/manage/browseRecords/getActiveMember'
      }).then(res => {
        this.activeMember = res
      })
    },
    // 加载首页顶部活跃人数
    initeGetTableData(res) {
      this.$post({
        url: mmUrl.home.get,
        data: {
          keyword: '',
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 10,
            skipCount: 0
          },
          searchTime:
            res !== 0
              ? this.someDay
                ? this.someDay
                : date.getFullYear() +
                  seperator +
                  nowMonth +
                  seperator +
                  strDate
              : '',
          type: res
        }
      }).then(res1 => {
        if (res === 0) {
          this.tableData2 = res1.items.items
        } else if (res === 1) {
          this.tableData1 = res1.items.items
        } else {
          this.tableData = res1.items.items
        }
      })
    },
    getTodayRegistered() {
      this.$get({
        url: '/manage/member/getTodayRegistered',
        data: { day: this.days }
      }).then(res => {
        this.Registered = res
      })
    }
  }
}
</script>
<style >
.warpBox1 {
  height: 100%;
  overflow: auto;
}
</style>
<style lang='scss' module>
.hotpostion {
  position: relative;
  .timer {
    position: absolute;
    right: 20px;
    z-index: 999;
    top: 20px;
  }
}
.gridContent1 {
  background: #fff;
  overflow: hidden;
  margin-top: 30px;
}
.margin20 {
  margin-top: 20px;
  padding-bottom: 50px;
}
.infoMa {
  .gridContent {
    display: flex;
    align-items: center;
    background: #fff;
  }
  i {
    font-size: 38px;
    width: 100px;
    height: 100px;
    display: inline-block;
    text-align: center;
    line-height: 100px;
    color: #fff;
    vertical-align: top;
  }
  .icon1 {
    background: #2d8cf0;
  }
  .icon2 {
    background: #64d572;
  }
  .icon3 {
    background: #f25e43;
  }
  .rightBox {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: #999;
  }
  .fontstyle1,
  .fontstyle2 {
    font-size: 30px;
    font-weight: 700;
  }
  .fontstyle1 {
    color: #2d8cf0;
  }
  .fontstyle2 {
    color: #f25e43;
  }
  p {
    text-align: center;
    font-size: 12px;
    color: #999;
  }
}
</style>
